<template>
	<view style="padding:20upx 30upx">
		<u-picker mode="time" v-model="timeShow" :params="params" @confirm="timeConfirm"></u-picker>
		<u-picker mode="time" v-model="retimeShow" :params="params" @confirm="retimeConfirm"></u-picker>
		<u-select v-model="regionShow" mode="mutil-column-auto" :list="listAddress" @confirm="confirm"></u-select>
		<u-form :model="form" ref="uForm" label-width="130">
			<u-form-item label="姓名" prop='name'>
				<u-input v-model="form.name" placeholder="请输入家属姓名..." />
			</u-form-item>
			<u-form-item label="电话" prop='pho'>
				<u-input v-model="form.pho" placeholder="请输入家属电话..." />
			</u-form-item>
			<u-form-item label="逝者" prop='nameof'>
				<u-input v-model="form.nameof" placeholder="请输入逝者姓名..." />
			</u-form-item>

			<u-form-item label="性别" prop='sex'>
				<u-radio-group v-model="form.sex">
					<u-radio name="1">
						男
					</u-radio>
					<u-radio name="2">
						女
					</u-radio>
				</u-radio-group>
			</u-form-item>
			<u-form-item label="逝世日期" prop='time'>
				<u-input type="select" :select-open="timeShow" v-model="model.time" placeholder="请选择逝世日期"
					@click="timeShow = true"></u-input>
			</u-form-item>
			<u-form-item label="墓碑位置">
				<u-input type="select" :select-open="regionShow" v-model="model.address" placeholder="请选择墓碑位置"
					@click="regionShow = true"></u-input>
			</u-form-item>
			<u-form-item label="预约时间">
				<u-input v-model="form.retime" :select-open="retimeShow" type="select" placeholder="请选择预约时间..."
					@click="retimeShow = true"></u-input>
			</u-form-item>
		</u-form>
		<view class="subBtn">
			<button type="primary" size="mini" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		data() {
			return {
				retimeShow: false,
				timeShow: false,
				regionShow: false,
				rules:{
					name:[{
						type:"string",
						require:true,
						message:'请重新填写名称'
					}],
					nameof:[{
						type:"string",
						require:true,
						message:'请重新填写逝者名称'
					}],
					sex:[{
						require:true,
						message:'请选择性别'
					}],
					relation:[{
						type:"string",
						message:'请正确填写与本人的关系'
					}],
					time:[{
						require:true,
						message:'请选择时间'
					}],
					pho:[{
						required: true, 
						message: '请输入手机号',
						trigger: ['change','blur'],
					},{
						// 自定义验证函数，见上说明
						validator: (rule, value, callback) => {
							// 上面有说，返回true表示校验通过，返回false表示不通过
							// this.$u.test.mobile()就是返回true或者false的
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change
						trigger: ['change','blur'],
					}],
				},
				form: {
					name: "",
					pho: '',
					sex: '1',
					nameof: '',
					time: '',
					address: '',
					retime: "",
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				listAddress: [{
					label: '青竹镇',
					value: '1',
					children: [{
						label: 'A区',
						value: '11',
						children: [{
							label: '1排',
							value: '111',
							children: [{
								label: '20号',
								value: '1111',
							}]
						}]
					}]
				}]
			}
		},
		methods: {
			confirm(e) {
				console.log(e);
				let a = ''
				this.form.address = e.reduce(function(pre, next, index) {
					if (index == 0) {
						return pre + next.label
					} else {
						return pre + '-' + next.label
					}
				}, a)
			},
			timeConfirm(e) {
				console.log(e)
				this.form.time = e.year + '-' + e.month + '-' + e.day
			},
			retimeConfirm(e) {
				this.form.retime = e.year + '-' + e.month + '-' + e.day
				console.log(e)
			},

			// 跳转 下葬预约列表
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
				this.$u.route({
					url: '/pages/view/subscribeList/subscribeList'
				})
			}
		}
	}
</script>

<style scoped>
	.subBtn {
		text-align: center;
		margin: 50upx auto;
	}
</style>
